<template>
  <div class="layout">
    <div class="header">
      <div class="btnLeft">
        <button class="btn pre" @click="goToPrev"></button>
        <button class="btn home" @click="goHome"></button>
      </div>
      <div class="headTit">金牛电气数据管理系统</div>
      <div class="btnRight">
        <button
          class="btn auto"
          :class="{ isFull: isBigScreen.fullscreen }"
          @click="handleFullScreen"
        ></button>
        <button class="btn end" @click="goToEnd"></button>
        <button class="btn out" @click="goToLogin"></button>
      </div>
    </div>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { useRouter } from "vue-router";

//是否全屏
const isBigScreen = reactive({
  fullscreen: false, // 是否全屏
});

function handleFullScreen() {
  let element = document.documentElement;
  // 判断是否已经是全屏,如果是全屏，退出
  if (isBigScreen.fullscreen) {
    if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  } else {
    // 否则，进入全屏
    if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      //火狐
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
    } else if (element.requestFullscreen) {
      // w3c
      element.requestFullscreen();
    }
  }
  isBigScreen.fullscreen = !isBigScreen.fullscreen;
}

const router = useRouter();

//回退
function goToPrev() {
  router.go(-1);
}

//回主页
function goHome() {
  // router.push('/home')
}

//终端
const goToEnd = () => {
  alert("暂时不可访问后台");
  // window.open("http://www.baidu.com")
};

//退出
function goToLogin() {
  // ElMessageBox.confirm(
  //     '亲爱的管理员，确认退出吗?',
  //     'Warning',
  //     {
  //       confirmButtonText: 'OK',
  //       cancelButtonText: 'Cancel',
  //       type: 'warning',
  //       draggable: true,
  //     }
  // ).then(() => {
  //   window.sessionStorage.clear()
  //   router.push('/login')
  // }).catch(() => {
  //   ElMessage({
  //     type: 'info',
  //     message: '已取消退出',
  //   })
  // })
}


</script>

<style scoped lang="scss">
body {
  padding: 0;
  margin: 0;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

// * 隐藏滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 隐藏滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.layout {
  width: 1920px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: #0e1f21;

  .header {
    width: 1920px;
    height: 113px;
    box-sizing: border-box;
    padding-top: 23px;
    display: flex;
    justify-content: space-between;
    //background: url("../assets/img/layout/headerBg.png") no-repeat center;
    // background: url("~@/assets/img/layout/hbg.png") no-repeat center;
    background: url("~@/assets/img/layout/wmsheader.png") no-repeat center;
    background-size: contain;
    position: relative;
    .headTit {
      font-size: 50px;
      color: #00ffff;
      font-weight: bold;
      letter-spacing: 5px;
      margin-left: 94px;
    }

    .btn {
      margin: 0 21px;
      cursor: pointer;
      border: none;
    }

    .pre {
      width: 107px;
      height: 20px;
      background: url("~@/assets/img/layout/pre.png") no-repeat center;
      background-size: contain;
    }

    .home {
      width: 93px;
      height: 20px;
      background: url("~@/assets/img/layout/home.png") no-repeat center;
      background-size: contain;
    }

    .auto {
      width: 63px;
      height: 20px;
      background: url("~@/assets/img/layout/auto.png") no-repeat center;
      background-size: contain;
    }

    .isFull {
      width: 63px;
      height: 20px;
      background: url("~@/assets/img/layout/full.png") no-repeat center;
      background-size: contain;
    }

    .end {
      width: 62px;
      height: 20px;
      background: url("~@/assets/img/layout/end.png") no-repeat center;
      background-size: contain;
    }

    .out {
      width: 96px;
      height: 20px;
      background: url("~@/assets/img/layout/out.png") no-repeat center;
      background-size: contain;
    }
  }

  .main {
    width: 1920px;
    height: 967px;
    box-sizing: border-box;

  }
}
</style>
